<template>
	<view class="card" style="min-height: 91vh;background: #f7f7f7;">
		<view>
			<view class="topCont" @click="detail(item.planId, item.isIndate)" v-for="(item, index) in list" :key="index">
				<view style="position: relative;">
					<image :src="item.imgUrl" mode="aspectFill"></image>
					<view class="mask" v-if="item.isIndate == '01'"><text class="mask_title">敬请期待</text></view>
					<view v-if="item.isIndate === '02'" class="tip">进行中</view>
					<view v-if="item.isIndate === '03'" class="tip finish">已结束</view>
				</view>
				<view class="read">
					<text class="title">{{ item.planTheme }}</text>
					<text class="subTitle">{{ item.clockTotalNum }}人参与</text>
				</view>
			</view>
		</view>

		<mix-load-more :status="loading"></mix-load-more>
	</view>
</template>

<script>
import http from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	data() {
		return {
			list: [],
			loading: 0,
			loadingType: 0,
			pageNum: 1,
			show: false
		};
	},
	components: {
		mixLoadMore
	},
	onLoad() {
		this.cardList();
	},
	onReachBottom() {
		//当划到最底部的时候触发事件
		//当划到最底部的时候触发事件
		if (this.loading != 2) {
			this.cardList();
		}
	},

	methods: {
		cardList() {
			this.loading = 1;
			http('/api/cusUserInfo/getThemePunchPlanClockByCustomerId', { data: { pageSize: '5', pageNum: this.pageNum }, method: 'GET' }).then(
				result => {
					if (result.code == '200') {
						const data = result.data;
						this.list = this.list.concat(data); //进行数据的累加
						if (data.length == 5) {
							this.pageNum++; //页数的++
							this.loading = 0;
						} else {
							this.loading = 2;
						}
						this.loading = this.list.length === 0 ? 3 : this.loading;
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		detail(id, isIndate) {
			uni.navigateTo({
				url: '../card/takeCard?id=' + id,
				animationType: 'pop-in',
				animationDuration: 200
			});
		}
	}
};
</script>

<style lang="less" scoped>
.card {
	background: #f7f7f7;
	.topCont {
		background: #fff;
		margin: 20rpx 36rpx;
		border-radius: 12rpx;
		position: relative;
		overflow: hidden;
		.tip {
			width: 120rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			color: #fff;
			background: #f39800;
			font-size: 24rpx;
			position: absolute;
			left: 0;
			top: 36rpx;
			&.finish {
				color: #8a8c8d;
				background-color: #f7f7f7;
			}
		}
		.mask {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			background-color: rgba(0, 0, 0, 0.7);
			z-index: 9;
			left: 0;
			right: 0;
			.mask_title {
				font-size: 30rpx;
				color: #fff;
				position: absolute;
				z-index: 10;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.read {
			padding: 30rpx 20rpx;
			display: flex;
			justify-content: space-between;
			.title {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #66645D;
				line-height: 42rpx;
			}
			.subTitle {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #8A8C8D;
				line-height: 40rpx;
			}
		}
		image {
			border-radius: 12rpx 12rpx 0 0;
			width: 100%;
			height: 290rpx;
		}
	}
}
</style>
